<template>
  <div class="bgimg">
    <Header active-index="3" />
    <!-- Breadcrumb Start -->
    <div class="main-bg">
      <div class="subbox">
        <h2 class="title">链上市场</h2>
        <div class="navbox">
          <ul>
            <li><i class="el-icon-arrow-right" />首页</li>
            <li class="active"><i class="el-icon-arrow-right" /> 链上市场</li>
          </ul>
        </div>
      </div>
    </div>
    <el-main>
      <el-tabs
        v-model="$route.query.activeName"
        :tab-position="tabPosition"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="数据统计" name="first">
          <span slot="label">
            <span class="span-box">
              <span
                ><img
                  :src="$imgURL + 'tab/01-1.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />数据统计</span
              >
            </span>
          </span>

          <Date
        /></el-tab-pane>
        <el-tab-pane label="发布流水" name="second">
          <span slot="label">
            <span class="span-box">
              <span
                ><img
                  :src="$imgURL + 'tab/02-2.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />发布流水</span
              >
            </span>
          </span>
          <Jiaoge />
        </el-tab-pane>
        <el-tab-pane label="交易流水" name="third">
          <span slot="label">
            <span class="span-box">
              <span
                ><img
                  :src="$imgURL + 'tab/03-3.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />交易流水</span
              >
            </span> </span
          ><Jiaoyi
        /></el-tab-pane>
        <el-tab-pane label="区块链" name="fourth">
          <span slot="label">
            <span class="span-box">
              <span
                ><img
                  :src="$imgURL + 'tab/04-4.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />区块链</span
              >
            </span>
          </span>
          <Qukuailian
        /></el-tab-pane>
        <el-tab-pane label="市场走势" name="five">
          <span slot="label">
            <span class="span-box">
              <span
                ><img
                  :src="$imgURL + 'tab/05-5.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />市场走势</span
              >
            </span>
          </span>
          <Zoushi
        /></el-tab-pane>
      </el-tabs>
    </el-main>
    <!-- Faq End -->
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/header/index.vue";
import Footer from "@/components/footer/index.vue";
import Date from "@/components/link/data/index.vue";
import Jiaoge from "@/components/link/jiaoge/index.vue";
import Jiaoyi from "@/components/link/jiaoyi/index.vue";
import Qukuailian from "@/components/link/qukuailian/index.vue";
import Zoushi from "@/components/link/zoushi/index.vue";
export default {
  components: { Header, Footer, Date, Jiaoge, Jiaoyi, Qukuailian, Zoushi },
  data() {
    return {
      activeName: "first",
      tabPosition: "left",
      data: undefined,
    };
  },
  mounted() {},
  methods: {
    // 获取当前点击下标
    tabsCode() {},
    handleClick() {},
  },
};
</script>
<style scoped></style>
